<template>
  <div class="syslogReportBody">
    <el-button type="success" size='small' @click="downloadData()" :loading='loading' style="margin-bottom:10px;">{{$t('统计下载')}}</el-button>
    <el-card class="box-card">
      <div slot="header" class="clearfix" v-if="roleID !== 2">
        <span>{{$t('事件类型分析统计')}}</span>
      </div>
      <event-statistics ref="eventStatistics" @loadingClick='loadingClick'></event-statistics>
    </el-card>
    <el-card class="box-card" style="margin-top:10px;">
      <div slot="header" class="clearfix" v-if="roleID !== 2">
        <span>{{$t('协议类型分析统计')}}</span>
      </div>
      <type-statistics ref="typeStatistics" @loadingClick='loadingClick'></type-statistics>
    </el-card>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card class="box-card" style="margin-top:10px;" id="LogLine">
          <div slot="header" class="clearfix">
            <span>{{$t('日志趋势')}}</span>
          </div>
          <log-line ref="logLine" :echartsData='echartsData' @loadingClick='loadingClick'></log-line>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card class="box-card" style="margin-top:10px;" id="LogBar">
          <div slot="header" class="clearfix">
            <span>{{$t('模块统计')}}</span>
          </div>
          <log-bar ref="logBar" :echartsData='echartsData' @loadingClick='loadingClick'></log-bar>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" style="margin-top:10px;" id="LogPie">
          <div slot="header" class="clearfix">
            <span>{{$t('日志级别')}}</span>
          </div>
          <log-pie ref="logPie" :echartsData='echartsData' @loadingClick='loadingClick'></log-pie>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getUserInfo } from '@/utils/auth'
import { reportLogDownload, reportLogModule } from '@/api/system/log'
import LogPie from './components/LogPie.vue'
import EventStatistics from './components/EventStatistics.vue'
import TypeStatistics from './components/TypeStatistics.vue'
import LogLine from './components/LogLine.vue'
import LogBar from './components/LogBar.vue'
import { Loading } from 'element-ui'
export default {
  name: 'SyslogReport',
  components: {
    EventStatistics,
    TypeStatistics,
    LogLine,
    LogPie,
    LogBar
  },
  data () {
    return {
      roleID: getUserInfo().roleID,
      loadingInstanceBar: null,
      loading: false,
      echartsData: {
        ALERT: [],
        DEBUG: [],
        ERROR: [],
        INFO: [],
        mode_list: []
      },
      loadingFlag: 0
    }
  },
  watch: {
    loadingFlag: {
      handler (newVal) {
        if (newVal === 5) {
          this.loading = false
          this.loadingFlag = 0
        }
      },
      immediate: true
    }
  },
  mounted () {
    this.loading = true
    if (document.getElementById('LogBar')) {
      this.loadingInstanceBar = Loading.service({
        target: '#LogBar',
        lock: true,
        text: this.$t('加载'),
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.4)'
      })
    }
    reportLogModule().then(res => {
      if (res.status === 0) {
        this.echartsData = res.info
      }
      if (this.loadingInstanceBar) {
        this.loadingInstanceBar.close()
        this.loadingInstanceBar = null
        this.loadingFlag += 1
      }
    }).catch(e => {
      if (this.loadingInstanceBar) {
        this.loadingInstanceBar.close()
        this.loadingInstanceBar = null
        this.loadingFlag += 1
      }
    })
  },
  methods: {
    // 控制统计下载的加载状态（到5时取消加载状态）
    loadingClick () {
      this.loadingFlag += 1
    },
    downloadData () {
      this.loading = true
      var formData = [{
        chartChar: null,
        countType: 'eventType',
        dip: '目的地址：--',
        endTime: '结束时间：--',
        sip: '源地址：--',
        startTime: '起始时间：--',
        tableData: [],
        type: '事件类型：--'
      },
      {
        chartChar: null,
        countType: 'eventType',
        dip: '目的地址：--',
        endTime: '结束时间：--',
        sip: '源地址：--',
        startTime: '起始时间：--',
        tableData: [],
        type: '协议类型：--'
      },
      {
        levelData: { ERROR: 0, ALERT: 0, INFO: 0, DEBUG: 0 },
        modeData: this.echartsData,
        noticeChartChar: null,
        shoppingChartChar: null,
        userSumChartChar: null
      }]

      Promise.all([
        this.$refs.eventStatistics.getImage().then(res => {
          formData[0] = res
        }),
        this.$refs.typeStatistics.getImage().then(res => {
          formData[1] = res
        }),
        this.$refs.logLine.exportImage().then(res => {
          formData[2].userSumChartChar = res
        }),
        this.$refs.logBar.exportImage().then(res => {
          formData[2].noticeChartChar = res
        }),
        this.$refs.logPie.exportImage().then(res => {
          formData[2].shoppingChartChar = res[0]
          formData[2].levelData = res[1]
        })
      ]).then(() => {
        formData = JSON.stringify(formData)
        reportLogDownload({ language: this.$i18n.locale, rule_map: formData }).then(res => {
          if (res[0]) {
            let blob = new Blob([res[0]], { type: res[2] })
            let objectUrl = URL.createObjectURL(blob)
            let link = document.createElement('a')
            link.download = res[1] // 文件名字
            link.href = objectUrl
            // 触发下载
            link.click()
            URL.revokeObjectURL(objectUrl)
          }
          this.loading = false
        })
      }).catch(e => {
        this.loading = true
      })
    }
  }
}
</script>
